<template>
  <div>
    <s-table
      ref="table"
      :row-key="(record) => record.id"
      :columns="nfColumns"
      :data="nfData"
    >
      <template slot="url" slot-scope="text, record">
        <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
          您的浏览器不支持 audio 标签
        </audio>
        <div v-else>
          -
        </div>
      </template>
      <template slot="sign" slot-scope="text">
        <a-tag v-if="text == 0">正常</a-tag>
        <a-tag color="red" v-else-if="text == 1">异常</a-tag>
        <a-tag color="blue" v-else>优秀</a-tag>
      </template>
      <template slot="action" slot-scope="text, record">
        <!--              <a-button type="link" @click="downAudio(record.url)">下载</a-button>-->
        <a type="link" @click="openRemark(record.remarks)">查看备注</a>
        <a-divider type="vertical" />
        <a disabled>删除</a>
      </template>
    </s-table>
    <a-modal
      title="备注内容"
      v-model="visible"
      :footer="null"
    >
      <a-comment v-for="item in remarks" :key="item.r_id">
        <a slot="author">{{ item.r_author }}</a>
        <a-avatar
          slot="avatar"
          icon="user"
        />
        <p slot="content">
          {{ item.content }}
        </p>
      </a-comment>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getCallList } from '@/api/voice'
import col from '@/columns/calls'
const nfColumns = col.nanfang

export default {
  components: {
    STable
  },
  name: 'NanFang',
  data () {
    return {
      nfColumns,
      nfData: parameters => {
        return getCallList(Object.assign(parameters, this.nfParams)).then(res => {
          return res.result
        })
      },
      queryParam: {},
      nfParams: {},
      visible: false,
      remarks: []
    }
  },
  created () {
    this.nfParams['filter[type]'] = '2'
  },
  methods: {
    openRemark (remark) {
      if (remark !== '') {
        this.remarks = remark
        this.visible = true
      } else {
        this.$warning({
          title: '暂无备注内容'
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
